import React, { useState, useEffect } from 'react';
import { Form } from 'antd';
import { size } from 'lodash';
import { useRequest } from '@/hooks';
import { checkAccountNameEmail, sendVerificationCode } from '@/pages/EntryManage/services';
import { history } from 'umi'
import { InputItem, Toast } from 'antd-mobile';
import { FormItem, Button } from '@/pages/Recruitment/External/components/mobile';
import styles from '@/pages/Recruitment/External/components/mobile/FormItem.less';

const organizeType = 1; // 1是oa

// 重置密码表单
const ResetForm = ({ form, name, email, redirectId }) => {
    const { getFieldDecorator } = form;
    const [disabled, setDisabled] = useState(true);

    // 校验账号是否存在
    const { loading, run } = useRequest(params => checkAccountNameEmail(params), {
        manual: true
    });

    // 发送验证码
    const { loading: sendCodeLoading, run: runSendCode } = useRequest(params => sendVerificationCode(params), {
        manual: true
    });

    // 按钮是否disabled状态
    useEffect(() => {
        const values = form.getFieldsValue();
        const arr = Object.values(values).filter(item => !item || item === '');
        let hasError = false;
        Object.keys(values).forEach(item => {
            if (size(form.getFieldError(item)) > 0) {
                hasError = true;
            }
        });
        setDisabled(hasError || size(arr) > 0);
    }, [form]);

    const handleSubmit = () => {
        form.validateFieldsAndScroll(async (err, values) => {
            if (!err) {
                const { code, msg } = (await run({ ...values, organizeType })) || {};

                if (code === 10000) {
                    // 账号存在调用发送验证码接口
                    const res = await runSendCode({
                        loginName: values?.email,
                        organizeType,
                        type: 10,
                        redirectId
                    });
                    if (res?.code === 10000) {
                        history.push({
                            pathname: '/external/interview/resetPassword',
                            query: { step: 2, name: values?.name, email: values?.email, id: redirectId }
                        });
                    } else {
                        Toast.fail(res?.msg);
                    }
                } else {
                    Toast.fail(msg);
                }
            }
        });
    };

    return (
        <div className={styles.resumeList}>
            <FormItem label="姓名" itemId="name" form={form}>
                {getFieldDecorator('name', {
                    validate: [
                        {
                            trigger: 'onChange',
                            rules: [
                                {
                                    required: false
                                },
                                {
                                    validator(rule, value, callback) {
                                        callback();
                                    }
                                }
                            ]
                        },
                        {
                            trigger: 'onBlur',
                            rules: [
                                {
                                    required: true,
                                    message: '请输入姓名'
                                },
                                {
                                    max: 50,
                                    message: '最大输入50个字符'
                                }
                            ]
                        }
                    ],
                    initialValue: name
                })(<InputItem placeholder="姓名" className={styles.inputI} clear />)}
            </FormItem>
            <FormItem label="账号" itemId="email" form={form}>
                {getFieldDecorator('email', {
                    validate: [
                        {
                            trigger: 'onChange',
                            rules: [
                                {
                                    required: false
                                },
                                {
                                    validator(rule, value, callback) {
                                        callback();
                                    }
                                }
                            ]
                        },
                        {
                            trigger: 'onBlur',
                            rules: [
                                {
                                    required: true,
                                    message: '请输入您的帐号 (您应聘时预留的邮箱)'
                                },
                                {
                                    max: 50,
                                    message: '最大输入50个字符'
                                }
                            ]
                        }
                    ],
                    initialValue: email
                })(<InputItem placeholder="账号 (您应聘时预留的邮箱)" className={styles.inputI} clear />)}
            </FormItem>
            <Button type="primary" onClick={handleSubmit} loading={loading || sendCodeLoading} disabled={disabled}>
                下一步
            </Button>
        </div>
    );
};

export default Form.create()(ResetForm);
